<template>
  <p-form-model ref="form" :model="form" :rules="rules">
    <div class="item">
      <div class="item-left">
        <p-form-model-item
          :label="label.opportunityNo"
          prop="opportunityNo"
          class="form-item"
        >
          <span>{{ form.opportunityNo }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.stage" prop="stage" class="form-item">
          <span>{{ stageOptions[form.stage] }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.opportunityName"
          prop="opportunityName"
          class="form-item"
        >
          <span>{{ form.opportunityName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.customerName" class="form-item">
          <span>{{ form.customerName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.salesGroupName" prop="salesGroupName">
          <span>{{ form.salesGroupName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.pmGroupCode" prop="pmGroupCode">
          <span>{{ form.pmGroupName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.leadsNo"
          prop="leadsNo"
          class="form-item"
        >
          <span>{{ form.leadsNo }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.expectQuantity" prop="expectQuantity">
          <span>{{ form.expectQuantity }}</span>
          (kpcs)
        </p-form-model-item>
        <p-form-model-item :label="label.expectCost" prop="expectCost">
          <span>{{ form.expectCost }}</span>
          (元)
        </p-form-model-item>
        <p-form-model-item :label="label.expectTime" prop="expectTime">
          <span>{{ form.expectTime }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.crustItemNo" prop="crustItemNo">
          <span>{{ form.crustItemNo }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.crustItemStep" prop="crustItemStep">
          <span>{{ form.crustItemStep }}</span>
        </p-form-model-item>
      </div>
      <div class="item-right">
        <p-form-model-item :label="label.state" prop="state" class="form-item">
          <span>
            {{ stateOptions[form.state] || '跟进中' }}
          </span>
        </p-form-model-item>
        <!-- 商机阶段状态 -->
        <p-form-model-item
          :label="label.stageStatus"
          prop="stageStatus"
          class="form-item"
        >
          <span>
            {{ stateStatusOptions[form.stageStatus] }}
          </span>
        </p-form-model-item>
        <p-form-model-item :label="label.salesOrgCode" prop="salesOrgCode">
          <span>{{ form.salesOrgName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.salesAreaName" prop="salesAreaName">
          <span>{{ customerArea[form.salesAreaName] }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.salesName"
          prop="salesName"
          class="form-item"
        >
          <span>
            {{ form.salesName
            }}<p-icon
              v-if="form.toSalesName"
              type="arrow-right"
              style="margin: 0 10px"
            />{{ form.toSalesName }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.pmName"
          prop="pmName"
          class="form-item"
        >
          <span>{{ form.pmName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.leadsName"
          prop="leadsName"
          class="form-item"
        >
          <span>{{ form.leadsName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.expectPrice" prop="expectPrice">
          <span>{{ form.expectPrice }}</span>
          (元/片)
        </p-form-model-item>
        <!-- 预期份额 -->
        <p-form-model-item :label="label.expectShare" prop="expectShare">
          <span>{{ form.expectShare }}%</span>
        </p-form-model-item>
        <p-form-model-item :label="label.leadsSource" prop="leadsSource">
          <span>{{ sourceOptions[form.leadsSource] }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.crustItemName" prop="crustItemName">
          <span>{{ form.crustItemName }}</span>
        </p-form-model-item>
        <p-form-model-item :label="label.appCategory" prop="appCategory">
          <span>{{ applicationOptions[form.appCategory] }}</span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item :label="label.competitor" prop="competitor">
      <span>{{ form.competitor }}</span>
    </p-form-model-item>
    <p-form-model-item :label="label.remark" prop="remark">
      <span>{{ form.remark }}</span>
    </p-form-model-item>
    <div class="item">
      <div class="item-left">
        <p-form-model-item
          :label="label.createUserName"
          prop="createUserName"
          class="form-item"
        >
          <span>{{ form.createUserName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.createDeptName"
          prop="createDeptName"
          class="form-item"
        >
          <span>{{ form.createDeptName }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateUserName"
          prop="updateUserName"
          class="form-item"
        >
          <span>{{ form.updateUserName }}</span>
        </p-form-model-item>
      </div>
      <div class="item-right">
        <p-form-model-item
          :label="label.creatTime"
          prop="creatTime"
          class="form-item"
        >
          <span>{{ form.createTime }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateTime"
          prop="updateTime"
          class="form-item"
        >
          <span>{{ form.updateTime }}</span>
        </p-form-model-item>
        <p-form-model-item
          :label="label.updateDeptName"
          prop="updateDeptName"
          class="form-item"
        >
          <span>{{ form.updateDeptName }}</span>
        </p-form-model-item>
      </div>
    </div>
  </p-form-model>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {
    customerArea() {
      return this.$store.state.dictionary.dict['customer_area'] || {};
    },
    orgOptions() {
      return this.$store.state.dictionary.dict['ltcsmsizebu'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['business_status'] || {};
    },
    stateStatusOptions() {
      return {
        0: '未启动',
        1: '进行中',
        2: '已通过',
        3: '不涉及',
        4: '结束',
      };
    },
    stageOptions() {
      return (
        this.$store.state.dictionary.dict['business_stage_process_node'] || {}
      );
    },
    applicationOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    levelOptions() {
      return this.$store.state.dictionary.dict['leads_level'] || {};
    },
    sourceOptions() {
      return this.$store.state.dictionary.dict['leads_source'] || {};
    },
    showCopy() {
      return !this.showForm;
    },
    uid() {
      return this.$store.state.user.uid;
    },
    label() {
      return {
        opportunityNo: '商机编号',
        stage: '商机阶段',
        stageStatus: '商机阶段状态',
        opportunityName: '商机名称',
        leadsNo: '线索编号',
        state: '商机状态',
        leadsName: '线索名称',
        leadsSource: '来源',
        crustItemNo: '客户项目号',
        crustItemStep: '客户项目阶段',
        itemDemandNum: '客户项目需求总量',
        expectPrice: '预期价格',
        expectTime: '预期放量时间',
        expectShare: '预期份额',
        salesOrgCode: '销售组织',
        salesGroupName: '销售组',
        pmGroupCode: 'KAPM组',
        customerName: '客户',
        assessLevel: '评估级别',
        crustItemName: '客户项目名称',
        appCategory: '应用别',
        expectQuantity: '预期数量',
        expectCost: '预期价值',
        salesAreaName: '销售区域',
        salesName: '销售',
        pmName: 'PM',
        competitor: '竞争对手',
        remark: '备注',
        createUserName: '创建人',
        createDeptName: '创建人部门',
        updateUserName: '修改人',
        creatTime: '创建时间',
        updateTime: '修改时间',
        updateDeptName: '修改人部门',
        accessory: '附件',
      };
    },
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: space-between;
  .item-left,
  .item-right {
    width: 48%;
    display: inline-block;
  }
}

.poros-form-item {
  display: flex;
  flex-wrap: nowrap;
  //   margin-bottom: 10px;
}
// .item {
//   width: 48%;
//   display: inline-block;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
</style>
